<template>
    <div class="chat-home">

        <div class="chat-content" ref="box">
            <div class="msg">
                <div v-for="item in list" :class="[item.type, 'msg-item']">
                    <div class="msg_val">
                        <van-image class="m-image" round width="36px" height="36px"
                            src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
                        <div class="chat-info">
                            <p class="chat-date">22:12:11</p>
                            <p class="chat">
                                {{ item.content }}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="content-input">
            <van-cell-group>
                <van-field v-model="sms" center placeholder="请输入短信验证码" type="textarea" autosize>
                    <template #button>
                        <van-button size="small" type="primary" @touchstart="a()"> 发送 </van-button>
                    </template>
                </van-field>
            </van-cell-group>

        </div>

    </div>
</template>
  
<script>

import { test } from "@/utils/test.js";

export default {
    name: 'my_login',
    data() {
        return {
            list: [],//聊天记录的数组
            contentText: "",//input输入的值
            sms: ""
        }
    },
    methods: {
        a() {
            this.list = [...this.list, { type: "mine", content: this.sms }];

            test({ chart: this.sms }).then((response) => {
                // debugger
                console.log("结果--------" + response)
                this.list = [...this.list, { type: "robot", content: response }];
            })
                .catch((err) => { });
            this.scrollToBottom();
        },
        scrollToBottom() { // 滚动到窗体底部
            this.$nextTick(() => {
                this.$refs.box.scrollTop = this.$refs.box.scrollHeight;
            });
        },

    }
}
</script>
  
<style scoped lang="scss" >
.butts {}


.chat-home {
    background: #efefef;
    height: 100%;
    position:relative;

}

.chat-content {
    margin: 2px;
    height: 100%;

}

.content-input {
    position:absolute;
   
}


.msg {
    overflow: auto;
    width: 99%;

    overflow: auto;
    padding-top: 5px;
    display: inline-block;
    margin-bottom: 150px;
    height: 100%;

    // padding-bottom: 100px;
    .msg-item {
        position: relative;
        overflow: hidden;
        font-size: 14px;
        line-height: 20px;

        .msg_val {
            padding: 10px 0;
            display: inline-block;
            border-radius: 40px;
            color: black;
            margin: 0 0 2px 0;
            max-width: 70%;
            text-align: left;
            box-sizing: border-box;
            display: flex;

            p {
                font-size: 12px;
                line-height: 16px;
                margin: 0px;
            }

            // .m-image {
            //     padding-right: 10px
            // }

            .chat {
                font-size: 14px;
                line-height: 20px;
                padding: 8px 10px;
                background: #fff;
                border-radius: 4px;
            }

        }

        &.robot {
            .msg_val {
                .chat-info {
                    padding-left: 10px;
                }
            }

        }

        &.mine {
            display: flex;
            flex-direction: row-reverse;

            .msg_val {

                padding-left: 10px;
                color: black;
                display: flex;
                flex-direction: row-reverse;

                .chat-info {
                    padding-right: 10px;

                    .chat-date {
                        text-align: end;
                    }
                }
            }
        }
    }
}

.msg_val {
    display: flex;
}
</style>
  